<template>
    <div class="dialog">
      <div class="loginPage">
          <el-form ref="form" :model="logForm" label-width="80px">
            <h3 class="title">登录</h3>
            <el-form-item label="账号：">
              <el-input v-model="logForm.username" placeholder="账号"></el-input>
            </el-form-item>
            <el-form-item label="密码：">
              <el-input v-model="logForm.password" type="password" placeholder="密码"></el-input>
            </el-form-item>
          </el-form>
      </div>
    </div>
</template>
<script>
export default {
  data () {
    return {
      logForm: {
        username: '',
        password: ''
      }
    }
  }
}
</script>
<style scoped>
    html,body{
        margin: 0;
        padding: 0;
        position: relative;
    }
    .title{
      text-align: center;
    }
    .dialog{
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.8);
    }
    .loginPage{
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -150px;
        margin-left: -175px;
        width: 350px;
        min-height: 300px;
        padding: 30px 20px 20px;
        border-radius: 8px;
        box-sizing: border-box;
        background-color: #fff;
    }
    .loginPage p{
        color: red;
        text-align: left;
    }
</style>